<template>
  <div class="message-swipe-actions">
    <div class="swipe-action-container" ref="container">
      <div class="content" ref="content" 
           :style="contentStyle" 
           @touchstart="handleTouchStart" 
           @touchmove="handleTouchMove" 
           @touchend="handleTouchEnd">
        <slot></slot>
      </div>
      <div class="actions" ref="actions">
        <div class="action read" @click="handleAction('read')" v-if="!message.read">
          <van-icon name="passed" />
          <span>已读</span>
        </div>
        <div class="action delete" @click="handleAction('delete')">
          <van-icon name="delete" />
          <span>删除</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted, watch } from 'vue';
import { Icon as VanIcon } from 'vant';

export default {
  name: 'MessageSwipeActions',
  components: {
    VanIcon
  },
  props: {
    message: {
      type: Object,
      required: true
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  emits: ['action'],
  setup(props, { emit }) {
    const container = ref(null);
    const content = ref(null);
    const actions = ref(null);
    
    // 滑动状态
    const startX = ref(0);
    const currentOffset = ref(0);
    const actionWidth = ref(0);
    const isOpen = ref(false);
    
    // 样式计算
    const contentStyle = computed(() => ({
      transform: `translateX(${currentOffset.value}px)`,
      transition: moving.value ? 'none' : 'transform 0.3s ease'
    }));
    
    const moving = ref(false);
    
    // 初始化
    onMounted(() => {
      if (actions.value) {
        actionWidth.value = actions.value.offsetWidth;
      }
    });
    
    // 监听消息变化，重置状态
    watch(() => props.message, () => {
      resetPosition();
    });
    
    // 触摸开始
    const handleTouchStart = (e) => {
      if (props.disabled) return;
      
      startX.value = e.touches[0].clientX;
      moving.value = true;
    };
    
    // 触摸移动
    const handleTouchMove = (e) => {
      if (props.disabled || !moving.value) return;
      
      const currentX = e.touches[0].clientX;
      const diff = currentX - startX.value;
      
      // 只允许左滑
      let offset = isOpen.value ? -actionWidth.value + diff : diff;
      
      // 限制右滑范围
      if (offset > 0) offset = 0;
      
      // 限制左滑范围
      if (offset < -actionWidth.value) offset = -actionWidth.value;
      
      currentOffset.value = offset;
    };
    
    // 触摸结束
    const handleTouchEnd = () => {
      if (props.disabled || !moving.value) return;
      
      moving.value = false;
      
      // 根据当前偏移决定是否展开
      if (currentOffset.value < -actionWidth.value / 2) {
        openActions();
      } else {
        closeActions();
      }
    };
    
    // 打开操作按钮
    const openActions = () => {
      currentOffset.value = -actionWidth.value;
      isOpen.value = true;
    };
    
    // 关闭操作按钮
    const closeActions = () => {
      currentOffset.value = 0;
      isOpen.value = false;
    };
    
    // 重置位置
    const resetPosition = () => {
      currentOffset.value = 0;
      isOpen.value = false;
    };
    
    // 处理操作点击
    const handleAction = (type) => {
      emit('action', { type, message: props.message });
      resetPosition();
    };
    
    return {
      container,
      content,
      actions,
      contentStyle,
      handleTouchStart,
      handleTouchMove,
      handleTouchEnd,
      handleAction
    };
  }
}
</script>

<style scoped>
.message-swipe-actions {
  position: relative;
  overflow: hidden;
}

.swipe-action-container {
  position: relative;
  overflow: hidden;
}

.content {
  position: relative;
  z-index: 1;
  background-color: #fff;
}

.actions {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  z-index: 0;
}

.action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 65px;
  height: 100%;
  color: #fff;
  font-size: 12px;
}

.action .van-icon {
  font-size: 18px;
  margin-bottom: 4px;
}

.action.read {
  background-color: #07c160;
}

.action.delete {
  background-color: #ee0a24;
}
</style> 